<template>
	<div class="zh-statistics">
		<nav-header>
			<div class="zh-h5-nav">
				<div 
					:class="activePanel === 'statistics' ? 'active' : ''"
					@click="changePanel('statistics')">学习统计</div>
				<div 
					:class="activePanel === 'upload' ? 'active' : ''" 
					@click="changePanel('upload')">上传统计</div>
				<div 
					:class="activePanel === 'download' ? 'active' : ''" 
					@click="changePanel('download')">下载统计</div>
			</div>
		</nav-header>
		<transition name="fade" mode="out-in" v-if="activePanel === 'statistics'" >
			<zh-learn-statistics />
		</transition>
		
		<transition name="fade" mode="out-in" v-if="activePanel === 'upload'" >
			<zh-upload-statistics />
		</transition>
		<transition name="fade" mode="out-in" v-if="activePanel === 'download'" >
			<zh-download-statistics />
		</transition>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	activePanel: 'statistics',
		    }
        },
        methods: {
            changePanel(panel){
				this.activePanel = panel;
			},
        },
  	}
</script>